<template>
  <div class="register_container">
    <div class="Text">
      <p>RegisterForm</p>
    </div>
    <div class="register">
      <!--注册表单区-->
      <div class="avatar_box">
        <img src="../assets/logo.png"
             alt="avatar" />
      </div>

      <div>
        <el-form :model="userInfo"
                 :rules="rules"
                 status-icon
                 ref="RegisterFormRef"
                 class="registerForm">
          <el-form-item prop="username">
            <el-input prefix-icon="el-icon-s-custom"
                      v-model="userInfo.username"
                      placeholder="请输入用户名"
                      autofocus
                      @keydown.enter.native="register"></el-input>
          </el-form-item>
          <el-form-item prop="password"
                        class="inputpass">
            <el-input type="password"
                      prefix-icon="el-icon-lock"
                      v-model="userInfo.password"
                      placeholder="请输入密码"
                      @keydown.enter.native="register"></el-input>
          </el-form-item>
          <el-form-item prop="confirmPassword"
                        class="confirmPassword">
            <el-input type="password"
                      prefix-icon="el-icon-lock"
                      v-model="userInfo.confirmPassword"
                      placeholder="请确认密码"
                      @keydown.enter.native="register"></el-input>
          </el-form-item>
          <el-form-item class="btns">
            <el-button type="primary"
                       @click="register">注册</el-button>
            <el-button type="primary"
                       @click="resetRegisterForm">重置</el-button>
            <el-button type="primary"
                       @click="return1">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
// import * as loginHttp from 'network/login/loginHttp';

export default {
  name: 'Register',
  data () {
    // 校验两次密码是否一致
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.userInfo.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }

    return {
      userInfo: {
        username: '',
        password: '',
        confirmPassword: ''
      },
      status: 0, // 是否成功注册0:没有,1:祖册成功
      rules: {
        // 用户名是否合法
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 5,
            max: 15,
            message: '长度在 5 到 15 个字符',
            trigger: 'blur'
          },
          {
            pattern: /^(\w{5,15})$/,
            message: '不能含有汉字和特殊符号',
            trigger: 'blur'
          }
        ],
        // 密码是否合法
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 5,
            max: 15,
            message: '长度在 5 到 15 个字符',
            trigger: 'blur'
          },
          {
            pattern: /^(\w{5,15})$/,
            message: '不能含有汉字和特殊符号',
            trigger: 'blur'
          }
        ],
        confirmPassword: [{ validator: validatePass, trigger: 'blur' }]
      }
    }
  },
  methods: {
    resetRegisterForm () {
      this.$refs.RegisterFormRef.resetFields()
    },

    return1 () {
      this.$router.replace('/')
    },

    // 进行注册
    register () {
      this.$refs.RegisterFormRef.validate((valid) => {
        this.result = 0
        if (!valid) {
          return
        }
        loginHttp
          .register({
            username: this.userInfo.username,
            password: this.userInfo.password
          })
          .then((res) => {
            console.log(res)
            if (res.result_code == 200) {
              this.status = 1
              this.$router.replace('/home')
            } else if (res.result_code === 400) {
              this.$message.error('该用户名已经存在')
            } else {
            }
          })
          .catch((err) => {
            this.result = -1
          })
      })
    }
  },

  // 注册之后跳转之前获取token
  beforeRouteLeave (to, from, next) {
    if (this.status == 1) {
      const loginInfo = this.userInfo
      this.$delete(loginInfo, 'confirmPassword')
      Object.assign(loginInfo, { type: 0 })
      loginHttp.login(loginInfo).then((res) => {
        console.log(res)
        this.$store.commit('setUserInfo', res.user)
        if (res.result_code === 200) {
          this.$message({
            showClose: true,
            message: '注册并登陆成功',
            type: 'success'
          })
          next()
        } else {
          this.$message({
            showClose: true,
            message: '请稍候再试',
            type: 'warning'
          })
          next(false)
        }
      })
    } else {
      next()
    }
  }
}
</script>
<!--
<style>
.el-input__inner {
  border-radius: 40px;
  height: 60px;
}
.el-icon-s-custom,
.el-icon-lock {
  font-size: 20px;
}

.el-icon-s-custom,
.el-icon-lock {
  font-size: 10px !important;
}

.el-button {
  border-radius: 20px;
  background-color: transparent;
  margin-bottom: 20px;
}

</style>
-->

<style scoped lang="less">
.register_container {
  height: 100%;
}
.register {
  width: 450px;
  height: 360px;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  //-webkit-
  transform: translate(-50%, -50%);
  background-color: #fff;

  .avatar_box {
    width: 130px;
    height: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
}

.registerForm {
  position: absolute;
  top: 35%;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.btns {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
}

.el-button {
  border-radius: 20px;
  margin-bottom: 20px;
}

.inputpass {
  transform: translateY(10px);
}

.confirmPassword {
  transform: translateY(20px);
}
</style>
